<template>
  <div class="">
    <!-- <button @click="toggleWeekends">toggle weekends</button> -->
    <FullCalendar :options="calendarOptions" @event-selected="eventClick(events)"/>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import $ from 'jquery'
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data () {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick,
        events: this.eventsf
      }
    }
  },
  created () {
    $('#calendar').find('.fc-prev-button, .fc-next-button').click(function () { console.log($(this).hasClass('fc-prev-button') ? 'prev' : 'next') })
    $('#calendar').fullCalendar({
    lang: "zh-cn",
    header: {
       left: 'prev, next, today',
       center: 'title',
       right: 'month'
    },
    height: 500,
    dayClick: function(date, jsEvent, view) {
       //点击空白日期调用
    },
    eventClick: function(calEvent, jsEvent, view) {
    //点击已有数据的日期调用
    },
    defaultDate: moment(),//默认日期
    events:function(start, end, callback){
    //prev上一月, next下一月等事件时调用
    }
    })
  },
  methods: {
    handleDateClick: function (arg) {
      console.log(arg)
    //   alert('date click! ' + arg.dateStr)
    },
    eventClick (events) {
      console.log(events)
    },
    eventsf (events) {
        console.log(events)
    }
  }
}
</script>

<style lang='less'></style>
